<template>
  <div class="charts" ref="echarts" />
</template>
<script>

export default {

  methods: {
    initPie(total, seriesData,totlaName) {
      const option = {
        color: ['#4b4ffe', '#fdb722', '#1cd694', '#5efff5', '#fc5351', '#5aa1aa'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: 'middle',
          itemWidth: 16,
          itemHeight: 12
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['65%', '80%'],
            center: ['30%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 2,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              normal: {
                  show: true,
                  position: 'center',
                  color:'#4c4a4a',
                  formatter: '{total|' + total +'}'+ '\n\r' + '{active|'+totlaName+'}',
                  rich: {
                      total:{
                          fontSize: 20,
                          fontWeight: 'bold',
                          padding: [6, 0],
                          color:'#333'
                      },
                      active: {
                          fontSize: 12,
                          color:'#666',
                      },
                  }
              },
              emphasis: {//中间文字显示
                  show: true,
              }
            },
            labelLine: {
              show: false
            },
            data: seriesData
          }
        ]
      }

      if (!this.echarts) this.echarts = this.$echarts.init(this.$refs.echarts)
      this.echarts.clear()
      this.echarts.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
  .charts {
    width: 100%;
    height: 200px;
  }
</style>